<%@ page contentType="text/html;charset=UTF-8" %>
<%@include file="/WEB-INF/jsp/common/taglibs.jspf"%>
<es:contentHeader>
    <%@include file="/WEB-INF/jsp/common/import-calendar-css.jspf"%>
    <style>

        legend {
            cursor: pointer;
        }
        .fc-button-add {
            margin-right: 10px!important;
        }

        #loading {
            position: absolute;
            top: 5px;
            right: 5px;
        }

        .ui-dialog {
            overflow: visible!important;
        }
        .ui-dialog-content {
            overflow: visible!important;
        }

        #calendar {
            width: 750px;
            margin: 0 auto;
        }
    </style>
</es:contentHeader>

<div  style="margin: 5px;margin-top: 10px;">
    <div class="row-fluid tool ui-toolbar">
        <div style="padding-left: 10px;">
            <a class="btn btn-link btn-view-info" data-toggle="tooltip" data-placement="bottom" title="点击查看个人资料/修改密码">
                <sys:showLoginUsername/>，欢迎您！
            </a>
            <span class="muted">|</span>
            &nbsp;
            <span class="muted">
                您有
                <a class="btn btn-link btn-view-message no-padding" data-toggle="tooltip" data-placement="bottom" title="点击查看未读消息">
                    <span class="badge badge-important">${messageUnreadCount}条</span>
                </a>
                未读消息
            </span>
        </div>
    </div>
    <br/>

    <fieldset>
        <legend>
            我的日历  (<span class="badge badge-important" data-toggle="tooltip" data-placement="bottom" title="最近三天，您有${calendarCount}个提醒提醒事项">${calendarCount}个</span>)
            <i class="icon-double-angle-down"></i>
        </legend>
        <div id='calendar'></div>
    </fieldset>

    <br/>
    <br/>
    <br/>
</div>

<es:contentFooter>
<%@include file="/WEB-INF/jsp/common/import-calendar-js.jspf"%>
<script>
    $(function() {
        $.app.initCommonBtn();
        $("legend").click(function() {
            var next = $(this).next();
            if(next.is(":hidden")) {
                $(this).find("i").removeClass("icon-double-angle-up");
                $(this).find("i").addClass("icon-double-angle-down");
                next.slideDown(300);
            } else {
                next.slideUp(300);
                $(this).find("i").removeClass("icon-double-angle-down");
                $(this).find("i").addClass("icon-double-angle-up");
            }
        });


         function initCalendar() {
            var calendar = $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                events: ctx + '/admin/personal/calendar/load',
                eventDrop: function(event) {
                    moveCalendar(event);
                },
                eventClick: function(event) {
                    viewCalendar(event);
                },
                loading: function(bool) {
                    if (bool) {
                        $('#loading').show();
                    } else {
                        $('#loading').hide();
                    }
                },
                editable: true,
                selectable: true,
                selectHelper: true,
                select: function(start, end) {
                    openNewCalendarForm(start, end);
                    calendar.fullCalendar('unselect');
                }
            });

            $('span.fc-button-prev').before('<span class="fc-button fc-button-add fc-state-default fc-corner-left fc-corner-right">新增</span>');

            $(".fc-button-add").click(function() {
                openNewCalendarForm();
            });

            function openNewCalendarForm(start, end) {
                var url = ctx + '/admin/personal/calendar/new';
                if(start) {
                    start = $.fullCalendar.formatDate(start, 'yyyy-MM-dd HH:mm:ss');
                    end = $.fullCalendar.formatDate(end, 'yyyy-MM-dd HH:mm:ss');
                    url = url + '?start=' + start + '&end=' + end;
                }
                $.app.openDialog("新增提醒事项", url, {
                    width:370,
                    height:430,
                    ok : function(modal) {

                        var form = modal.find("#editForm");
                        if(!form.validationEngine('validate')) {
                            return false;
                        }
                        var url = ctx + "/admin/personal/calendar/new";
                        $.post(url, form.serialize(), function() {
                            calendar.fullCalendar("refetchEvents");
                        });

                        return true;
                    }
                });
            }

            function moveCalendar(event) {
                var url = ctx + "/admin/personal/calendar/move";
                var id = event.id;
                var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
                var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
                url = url + "?id=" + id;
                url = url + "&start=" + start + "&end=" + end;

                $.post(url, function() {
                    calendar.fullCalendar("refetchEvents");
                });
            }

            function viewCalendar(event) {
                var url = ctx + "/admin/personal/calendar/view/" + event.id;
                $.app.openDialog("查看提醒事项", url, {
                    width:370,
                    height:250,
                    noTitle : false,
                    okBtn : false,
                    closeBtn : false
                });
            }
            $("body").on("click", ".btn-delete-calendar", function() {
                var $this = $(this);
                $.app.confirm({
                    title : '确认删除提醒事项吗？',
                    message : '确认删除提醒事项吗？',
                    ok : function() {
                        var url = ctx + "/admin/personal/calendar/delete?id=" + $this.data("id");
                        $.post(url, function() {
                            calendar.fullCalendar("refetchEvents");
                            $.app.closeDialog();
                        });
                    }
                });
            });
        }

        initCalendar();
    })
</script>
</es:contentFooter>